<template>
	<view class="content">
		<view v-for="(item,index) in Lists" :key="index" class="following_flex"
			:style="{'borderBottom':index+1 === Lists.length ? 'none' : '2rpx solid #e3e3e3'}"
			>
			<view @tap.stop.prevent="linkUrl(`/pages/Home_page/details?id=${item._id}`)">
				<u-avatar :src="item.avatar" :size="50"></u-avatar>
				<text>{{item.username || ''}}</text>
			</view>
			<button @click="followUser(item)" v-if="item.isFollowing === false">关注</button>
			<button @click="cancel(item)" v-if="item.isFollowing === true">取消关注</button>

		</view>
		<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText"
			:icon="true" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		followUser,
		getFollowerList,
		getSettledUserDetails,
		unfollowUser
	} from '../../../api/user.js';
	export default {
		data() {
			return {
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '没有了哦', //没有关注的哦，快去关注一个吧！
				req: {
					followingId: '',
					page: 1,
					pageSize: 10
				},
				Lists: []
			}
		},
		onLoad(options) {
			if ('id' in options) {
				this.req = {
					...this.req,
					...{
						followingId: options.id
					}
				};
				this.getFollowerList();
			}
		},
		// 上拉加载数据
		onReachBottom() {
			if (this.status == 'nomore') return;
			this.status = 'loading';
			this.req.page = ++this.req.page;
			// 获取列表数据
			this.getFollowerList();
		},
		// 下拉刷新数据
		onPullDownRefresh() {
			// 清空数据
			this.req.page = 1;
			this.status = 'loadmore';
			this.Lists = [];
			this.getFollowerList();
			uni.stopPullDownRefresh();
			uni.showToast({
				mask: true,
				title: "刷新成功",
				icon: "none"
			})
		},
		methods: {
			/**
			@method 链接跳转
			**/
			linkUrl(url) {
				uni.navigateTo({
					url: url
				});
			},
			/**
			@method 取消关注
			@param followingId → 被关注用户的 ID（你要关注的那个人）
			**/
			async cancel(e) {
				try {
					const _this = this;
					const res = await unfollowUser({
						followingId: e.userId,
					});

					if (res.code === 200) {
						this.$refs.uToast.show({
							type: "default",
							title: "默认主题",
							message: "取消成功！",
							iconUrl: "https://uviewui.com/demo/toast/default.png",
							complete() {
								
							},
						});
						
						_this.req.page = 1;
						_this.status = 'loadmore';
						_this.Lists = [];
						_this.getFollowerList();
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			/**
			@method 获取关注列表
			**/
			async getFollowerList() {
				try {
					const res = await getFollowerList(this.req);
					var data = res.data;
					if (res.code === 200) {
						this.Lists.push(...data.data);
						// 判断数据数量，修改状态
						if (data.data.length == 0 || data.data.length < this.req.pageSize) {
							this.status = 'nomore';
							return;
						}
					} else {
						uni.$u.toast('获取粉丝列表失败');
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			/**
			@method 关注
			@param followingId → 被关注用户的 ID（你要关注的那个人）
			**/
			async followUser(e) {
				try {
					const _this = this;
					const res = await followUser({
						followingId: e.userId,
					});

					if (res.code === 200) {
						this.$refs.uToast.show({
							type: "default",
							title: "默认主题",
							message: "关注成功！",
							iconUrl: "https://uviewui.com/demo/toast/default.png",
							complete() {
								
							},
						});
						
						_this.req.page = 1;
						_this.status = 'loadmore';
						_this.Lists = [];
						_this.getFollowerList();
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},

		}
	}
</script>

<style>
	page {
		background-color: #f8f9fa;
	}
</style>
<style scoped lang="scss">
	button::after {
		border: none;
		background-color: transparent;
	}

	.content {
		width: auto;

		.following_flex {
			width: auto;
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				display: flex;
				align-items: center;

				text {
					font-weight: 500;
					font-size: 30rpx;
					margin-left: 20rpx;
					letter-spacing: 2rpx;
				}
			}

			button {
				width: auto;
				height: 64rpx;
				background: #ffaf32;
				border-radius: 50rpx;
				box-shadow: 0rpx 6rpx 30rpx 0rpx rgba(83, 60, 215, 0.2600);
				color: #FFFFFF;
				line-height: 64rpx;
				text-align: center;
				font-size: 28rpx;
				margin: 0rpx;
				border: none;
			}
		}
	}
</style>